<template>
  <div id="mask">
    <div class="center">
      <h2 class="title">天猫双十二惊喜袭来</h2>
      <img :src="images[index]" alt="Banner 图片" class="banner-img" />
      <a
        href="javascript:void(0)"
        class="left"
        @click="prev"
        v-show="index > 0"
      >
        <img :src="left" alt="上一张" />
      </a>
      <a
        href="javascript:void(0)"
        class="right"
        @click="next"
        v-show="index < images.length - 1">
        <img :src="right" alt="下一张" />
      </a>
    </div>
  </div>
</template>

<script>
import left from './assets/banner/images/left.png'
import right from './assets/banner/images/right.png'
import img1 from './assets/banner/images/01.jpg'
import img2 from './assets/banner/images/02.jpg'
import img3 from './assets/banner/images/03.jpg'
import img4 from './assets/banner/images/04.jpg'

export default {
  data() {
    return {
      images: [img1, img2, img3, img4],
      index: 0,
      left,
      right,
    }
  },
  methods: {
    prev() {
      if (this.index > 0) {
        this.index--
      }
    },
    next() {
      if (this.index < this.images.length - 1) {
        this.index++
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import url("./assets/banner/css/index.css");
</style>
